<template>
  <view class="main">
    <up-image :show-loading="true" :src="props.src" width="280rpx" height="280rpx" class="img">
    </up-image>
    <div style="display: block">
      <div class="info">
        <div>
          <up-text :text="props.name"></up-text>
          <up-text :text="'$'+props.value"></up-text>
        </div>
        <view class="button">
          <div>
            +1
          </div>
        </view>
      </div>
    </div>
  </view>
</template>

<script setup>
const props = defineProps([
  'src',
  "name",
  "value"
])
</script>

<style scoped lang="scss">
.main {
  display: flex;

  .img {
    display: inline-block;
    width: 300rpx;
  }

  .info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: space-between;
    height: 100%;
  }

  .button {
    background-color: saddlebrown;

  }
}

</style>
